<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口测试</title>
    <#include "/view/admin/head.html"/>
    <script type="text/javascript" src="${base}/jstool/jquery.form.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-fileinput/js/locals/zh.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-fileinput/css/fileinput.min.css" />

    <style type="text/css">
        .list-path {
            height: 50px;
            line-height: 50px;
            background-color: #9acfea;
        }

        .table-class {
            width: 90%;
            text-align: center;
            border: 1px solid #afd9ee;
            margin: 0 auto;
            margin-top: 50px;
        }

        table th {
            width: 20%;
            background-color: #d9edf7;
            text-align: right;
        }

        table td {
            width: 20%;
            text-align: left;
        }


    </style>
    <script type="text/javascript">
        $(function() {
            $('input[type="file"]').fileinput({

                language: 'zh', //设置语言
//                allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
                showUpload: false, //是否显示上传按钮
                showCaption: false,//是否显示标题
//                browseClass: "btn btn-primary", //按钮样式
//                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                overwriteInitial: false,
                showPreview:true
//                overwriteInitial:false
            });
        });
    </script>
</head>
<body>
<div class="list-path">
		<span style="margin-left: 50px;"> <span class="glyphicon glyphicon-home">测试接口</span>
		</span>
</div>
<form name="formTest" id="formTest">
<div class="table-class">
    <table class="table table-bordered">
        <tr>
            <td colspan="4">
                <div class="form-group">
                    <input type="text" class="form-control" id="url" placeholder="url"
                           value="/chezhujie/api1/generateOrder.jn">
                </div>
            </td>
        </tr>
        <tr>
            <th>
                <div class="form-group">
                    <input type="text" class="form-control"  placeholder="name" value="">
                </div>
            </th>
            <td colspan="3">
                <div class="form-group">
                    <input type="file" class="form-control fileupload" multiple  >
                </div>
            </td>
        </tr>
        <#list 1..5 as i>

                <tr>
                    <th>
                        <div class="form-group">
                            <input type="text" class="form-control"  placeholder="name" value="">
                        </div>
                    </th>
                    <td>
                        <div class="form-group">
                            <input type="text" class="form-control"  placeholder="value" value="">
                        </div>
                    </td>
                    <th>
                        <div class="form-group">
                            <input type="text" class="form-control"  placeholder="name" value="">
                        </div>
                    </th>
                    <td>
                        <div class="form-group">
                        <input type="text" class="form-control"  placeholder="name" value="">
                        </div>
                    </td>
                </tr>

            </#list>

        <tr id="sbcon">
            <td colspan="4" >
                <a class="btn btn-success" href="javascript:add()">增加条件</a>
                <a class="btn btn-success" href="javascript:sbm()">提交</a>
                <a class="btn btn-success" href="javascript:clearpre()">清空</a>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <div id="output2" >&nbsp;</div>
            </td>
        </tr>
        <tr>
            <td colspan="4" rowspan="5">
                <pre id="output" style="height: 900px;"></pre>
            </td>
        </tr>
    </table>
</div>
</form>
<script type="text/javascript">
    function clearpre(){
        $('#output').text("");
        $('#output2').html("");
    }
    function add(){
        var str='';
        str+="  <tr>";
        str+="                    <th>";
        str+="                        <div class=\'form-group\'>";
        str+="                            <input type=\'text\' class=\'form-control\'  placeholder=\'name\' value=\'\'>";
        str+="                        </div>";
        str+="                    </th>";
        str+="                    <td>";
        str+="                        <div class=\'form-group\'>";
        str+="                            <input type=\'text\' class=\'form-control\'  placeholder=\'value\' value=\'\'>";
        str+="                        </div>";
        str+="                    </td>";
        str+="                    <th>";
        str+="                        <div class=\'form-group\'>";
        str+="                            <input type=\'text\' class=\'form-control\'  placeholder=\'name\' value=\'\'>";
        str+="                        </div>";
        str+="                    </th>";
        str+="                    <td>";
        str+="                        <div class=\'form-group\'>";
        str+="                            <input type=\'text\' class=\'form-control\'  placeholder=\'value\' value=\'\'>";
        str+="                        </div>";
        str+="                    </td>";
        str+="                </tr>";
        $(str).insertBefore($('#sbcon'));

    }
    function sbm(){
//        var name = $('th input').val();
        $('th input').each(function(i,val){
            $(val).parent().parent().next().find('input').attr('name',$(val).val());
        });
        var options ;
        if($('.file-preview-frame').length==0){
            options = {
                target: '#output',   // target element(s) to be updated with server response
                beforeSubmit: showRequest,  // pre-submit callback
                success: showResponse,  // post-submit callback
                error: showError,
                // other available options:
                url: $('#url').val(),         // override for form's 'action' attribute
                type: "post",        // 'get' or 'post', override for form's 'method' attribute
                dataType: "json"        // 'xml', 'script', or 'json' (expected server response type)
                //clearForm: true        // clear all form fields after successful submit
                //resetForm: true        // reset the form after successful submit

                // $.ajax options can be used here too, for example:
                //timeout:   3000
            };
        }else {
            options = {
                target: '#output',   // target element(s) to be updated with server response
                beforeSubmit: showRequest,  // pre-submit callback
                success: showResponse,  // post-submit callback
                error: showError,
                enctype: 'multipart/form-data',
                // other available options:
                url: $('#url').val(),         // override for form's 'action' attribute
                type: "post",        // 'get' or 'post', override for form's 'method' attribute
                dataType: "json"        // 'xml', 'script', or 'json' (expected server response type)
                //clearForm: true        // clear all form fields after successful submit
                //resetForm: true        // reset the form after successful submit

                // $.ajax options can be used here too, for example:
                //timeout:   3000
            };
        }

        // 将myForm使用 'ajaxForm' 进行绑定
        $('#formTest').ajaxForm(options);
        $('#formTest').submit();
    }
    function showRequest(formData, jqForm, options) {
//        console.log(formData);
//        console.log(jqForm);
//        console.log(options);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form)  {

        $('#output').text(jsonFormat(JSON.stringify(responseText)));
        var str=' <div class="alert alert-success">'
            +'<a href="#" class="close" data-dismiss="alert">×</a> <strong>操作成功!</strong>${success!}'
            +'</div>';
        $(str).insertAfter($('#sbcon'));

    }
    function showError(XMLHttpRequest, textStatus, errorThrown){
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
        $('#output2').html(XMLHttpRequest.responseText);
        var str=' <div class="alert alert-success">'
            +'<a href="#" class="close" data-dismiss="alert">×</a> <strong>操作成功!</strong>${success!}'
            +'</div>';
        $(str).insertAfter($('#sbcon'));
    }
    function jsonFormat(jsonStr){
        var res="";
        for(var i=0,j=0,k=0,ii,ele;i<jsonStr.length;i++)
        {//k:缩进，j:""个数
            ele=jsonStr.charAt(i);
            if(j%2==0&&ele=="}")
            {
                k--;
                for(ii=0;ii<k;ii++) ele="    "+ele;
                ele="\n"+ele;
            }
            else if(j%2==0&&ele=="{")
            {
                ele+="\n";
                k++;
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(j%2==0&&ele==",")
            {
                ele+="\n";
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(ele=="\"") j++;
            res+=ele;
        }
        return res;
    }
</script>
</body>
</html>